<!DOCTYPE html>
<html>
  <head>
    <title>Photo-Hub</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
    <link href="css/style.css" rel='stylesheet' type='text/css' />
    <link href="css/mystyle.css" rel='stylesheet' type='text/css' />
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script src="js/hander.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
          $("#email").focus();
          var send=false;
          $("#email").blur(function(){
            var reMail =/^(?:[a-zA-Z0-9]+[_\-\+\.]?)*[a-zA-Z0-9]+@(?:([a-zA-Z0-9]+[_\-]?)*[a-zA-Z0-9]+\.)+([a-zA-Z]{2,})+$/;
					  var value=$(this).val();
					  if(!reMail.test(value)){
						  $(".forgetPass_container .tip").html("the email is wrong");
						  return;
					  }else{
						  $(".forgetPass_container .tip").html("");
              $.ajax({
                url:"CenterController",
                data:{'operator':'resetPassword','email':$("#email").val()},
                dataType:'JSON',
                success:function(result){
                    if(result.success){
                        $(".forgetPass_container .tip").html("");
                        send=true;
                    }else{
                      $(".forgetPass_container .tip").html(result.tip);
                    }
                }
              });
					  }
          });
          $("#sendResetPassEmail").click(function(){
              if(send){
                $.ajax({
                  url:"CenterController",
                  data:{'operator':'sendResetPassEmail','email':$("#email").val()},
                  dataType:"text",
                  async:true,
                  success:function(result){
                    $(".forgetPass_send .tip").html(result);
                  }
                });
              }
          });
        });
    </script>
  </head>
  <body>
  <div class="header">
      <div class="container">
         <div class="logo">
      <h1><a href="index.html">Photo Hub</a></h1>
     </div>
     <div class="top_right">
       <ul class="top_right_main">
        <li><a href="register.html">Register</a></li>|
        <li class="login" >
           <div id="loginContainer"><a href="javascript:void();" id="loginButton"><span>Login</span></a>
              <div id="loginBox">
                <form id="loginForm">
                        <fieldset id="body">
                          <fieldset>
                                  <label for="userName">userName</label>
                                  <input type="text" name="userName" id="userName">
                            </fieldset>
                            <fieldset>
                                    <label for="password">Password</label>
                                    <input type="password" name="password" id="password">
                             </fieldset>
                            <input type="button" id="login" value="Sign in">
                          <label for="checkbox"><input type="checkbox" id="checkbox" checked=""> <i>Remember me</i></label>
                          <div class="tip clr"></div>
                      </fieldset>
                         <span><a href="forgetPassword.html">Forgot your password?</a></span>
                 </form>
                </div>
              </div>
          </li>
          <li>
          </li>
       </ul>
        <script type="text/javascript">
              var value=getCookie('loginInfo');
              if(value.trim()!=""){
                $(".top_right_main").html("<li>welcome! <a href='javascript:void(void);' id='personal'>"+value+"</a>&nbsp;"
                +"<a href='javascript:void(void);' id='exit'>Exit</a></li>");
              }
        </script>
      </div>
     <div class="clearfix"></div>
    </div>
  </div>
 	<div class="forgetPass">
 	  <h3>RESET PASSWORD</h3>
    <div class="forgetPass_container">
        <label for="email">Email*</label>
        <div class="forgetPass_container_input">
            <input type="text" id="email">
        </div>
        <span class="tip"></span>
    </div>
    <div class="forgetPass_send">
        <span><button id="sendResetPassEmail">Send Email</button></span>
        <span class="tip"></span>
    </div>
 	</div>
  <div class="grid_2">
    <div class="container">
      <div class="col-md-3 col_2">
        <h3>Stock Photo<br>Categories</h3>
      </div>
      <div class="col-md-9 col_5">
        <div class="col_1_of_5 span_1_of_5">
          <ul class="list1">
              <li>
              <input type="hidden" value="1">
              <a href="stock.html">Abstract</a>
              </li>
                  <li><input type="hidden" value="2"><a href="stock.html">Animals/Wildlife</a></li>
                  <li><input type="hidden" value="3"><a href="stock.html">The Arts</a></li>
                  <li><input type="hidden" value="4"><a href="stock.html">Backgrounds/Textures</a></li>
                  <li><input type="hidden" value="5"><a href="stock.html">Beauty/Fashion</a></li>
                  <li><input type="hidden" value="6"><a href="stock.html">Buildings/Landmarks</a></li>
                </ul>
        </div>
        <div class="col_1_of_5 span_1_of_5">
          <ul class="list1">
              <li><input type="hidden" value="7"><a href="stock.html">Business/Finance</a></li>
                  <li><input type="hidden" value="8"><a href="stock.html">Celebrities</a></li>
                  <li><input type="hidden" value="9"><a href="stock.html">Editorial</a></li>
                  <li><input type="hidden" value="10"><a href="stock.html">Education</a></li>
                  <li><input type="hidden" value="11"><a href="stock.html">Food and Drink</a></li>
                  <li><input type="hidden" value="12"><a href="stock.html">Healthcare/Medical</a></li>
                </ul>
        </div>
        <div class="col_1_of_5 span_1_of_5">
          <ul class="list1">
              <li><input type="hidden" value="13"><a href="stock.html">Holidays</a></li>
                  <li><input type="hidden" value="14"><a href="stock.html">Illustrations/Clip-Art</a></li>
                  <li><input type="hidden" value="15"><a href="stock.html">Industrial</a></li>
                  <li><input type="hidden" value="16"><a href="stock.html">Interiors</a></li>
                  <li><input type="hidden" value="17"><a href="stock.html">Miscellaneous</a></li>
                  <li><input type="hidden" value="18"><a href="stock.html">Model Released Only</a></li>
                </ul>
        </div>
        <div class="col_1_of_5 span_1_of_5">
          <ul class="list1">
              <li><input type="hidden" value="19"><a href="stock.html">Nature</a></li>
                  <li><input type="hidden" value="20"><a href="stock.html">Objects</a></li>
                  <li><input type="hidden" value="21"><a href="stock.html">Parks/Outdoor</a></li>
                  <li><input type="hidden" value="22"><a href="stock.html">People</a></li>
                  <li><input type="hidden" value="23"><a href="stock.html">Religion</a></li>
                  <li><input type="hidden" value="24"><a href="stock.html">Science</a></li>
                </ul>
        </div>
        <div class="clearfix"></div>
      </div>
      <div class="clearfix"> </div>
    </div>
  </div>
  <script type="text/javascript">
    //处理下方的categroy
    $.ajax(
        {
          url:"CenterController",
          type:"get",
          data:{'operator':'init','page':'index','part':'categroy'},
          dataType:"JSON",
          success:function(data){
            for(var i=0;i<data.length;i++){
              var $input=$(".list1 li input").eq(i);
              $input.attr('value',data[i].id);
              var $a=$(".list1 li a").eq(i);
              $a.html(data[i].name);
            }
          }
        }
      );
  </script>
  <div class="grid_3">
	  <div class="container">
	  	 <ul id="footer-links">
			<li><a href="#">Terms of Use</a></li>
			<li><a href="#">Royalty Free License</a></li>
			<li><a href="#">Extended License</a></li>
			<li><a href="#">Privacy</a></li>
			<li><a href="support.html">Support</a></li>
			<li><a href="about.html">About Us</a></li>
			<li><a href="faq.html">FAQ</a></li>
			<li><a href="#">Categories</a></li>
         </ul>
         <p>Copyright © 2015 Photo-Hub. All Rights Reserved.Design by <a href="http://w3layouts.com/" target="_blank">W3layouts</a> </p>
	  </div>
	</div>
</body>
</html>
